<script setup>
import { Warning,InfoFilled,Plus} from '@element-plus/icons-vue';
import { getAuthInfoAPI,getCertificatesTypeAPI,submitAuthInfoAPI  } from '@/api/user';
import { ref, onMounted } from 'vue';
import {ElMessage  } from 'element-plus';


// 用户实名认证信息
const authInfo = ref({});

// 获取用户实名认证信息
const getAuthInfo = async () => {
    const res = await getAuthInfoAPI();
    console.log(res);
    authInfo.value = res.data;
}

// 初始化
onMounted(() => {
    getAuthInfo();
    getCertificatesType ();
})

// 实名认证表单数据
const authForm = ref({
    name: '',
    certificatesType: '',
    certificatesNo:'',
    img: []
})

// 校验规则
const rules = {
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 5, message: '姓名长度在2到5个字符', trigger: 'blur' }
    ],
    certificatesType: [
        { required: true, message: '请选择证件类型', trigger: 'change' }
    ],
    certificatesNo: [
        { required: true, message: '请输入证件号码', trigger: 'blur' },
        {pattern: /^\d*$/, message: '证件号码必须为数字',trigger: 'blur'}
    ],
    img: [
        {
            validator: (rule, value, callback) => {
                if (value.length === 0) {
                    callback(new Error('请上传图片'));
                } else {
                    callback();
                }
            },
            trigger: 'change',
            required: true
        }
    ]
}

// 证件类型
const certificatesTypeOptions = ref([]);

// 获取证件类型
const getCertificatesType = async () => {
    const res = await getCertificatesTypeAPI()
    // console.log(res);
    certificatesTypeOptions.value = res.data
}


// 表单对象
const authFormRef = ref(null);

// 提交
const submitForm = () => {
    // console.log(authForm.value);
    // 整体校验
    authFormRef.value.validate( async (valid) => {
        if(valid) {
            // console.log(authForm.value);
            // 获取提交数据
            const params = {
                name: authForm.value.name,
                certificatesType: authForm.value.certificatesType,
                certificatesNo:authForm.value.certificatesNo,
                certificatesUrl:previewImageUrl.value
            }
            console.log(params);
            const res = await submitAuthInfoAPI (params);
            console.log(res);
            ElMessage.success('提交成功');
            getAuthInfo();
            
        }
    })
}

// 上传图片超出限制
const handleExceed = () => {
    ElMessage.warning('只能上传一张图片')
}

// 上传图片成功
const handleAvatarSuccess = (res) => {
    previewImageUrl.value = res.data;
}

// 图片预览框显示
const dialogVisible = ref(false);

// 预览图片地址
const previewImageUrl = ref('');

// 图片预览
const handlePictureCardPreview = (file) => {
    dialogVisible.value = true;
}

// 移除图片
const handleRemove = (file) => {
    console.log(file);
}

// 重写按钮逻辑
const resetAuthForm = () =>  {
    authFormRef.value.resetFields();
    authForm.value.img = [];
    console.log(authForm.value);
}
</script>
<template>
    <div class="vip">
        <el-card >
            <template #header>
            <div class="card-header">
                <span>实名认证信息</span>
            </div>
            </template>
            <p><el-icon><InfoFilled /></el-icon>完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。</p>
            <template #footer>
                <div style="display: flex; justify-content: center;" v-if="authInfo.authStatus">
                    <el-descriptions
                            :column="1"
                            border
                            label-width="200px"
                            
                            style="width: 600px;"
                        >
                            <el-descriptions-item align="center" label-align="center" :min-width="20" label="用户姓名">{{ authInfo.name }}</el-descriptions-item>
                            <el-descriptions-item  align="center" label-align="center" :min-width="20"  label="证件类型">身份证</el-descriptions-item>
                            <el-descriptions-item align="center" label-align="center" :min-width="20"  label="证件号码" :span="2">{{ authInfo.certificatesNo }}</el-descriptions-item>
                        </el-descriptions>
                </div>
                <div v-else style="display: flex; justify-content: center;">
                    <el-form ref="authFormRef" :rules="rules" :model="authForm" style="width: 50%;" label-width="100px">
                        <el-form-item label="用户姓名" prop="name">
                            <el-input v-model="authForm.name" placeholder="请输入用户姓名" ></el-input>
                        </el-form-item>
                        <el-form-item label="证件类型" prop="certificatesType">
                            <el-select
                            v-model="authForm.certificatesType"
                                placeholder="请选择证件类型"
                                >
                                <el-option
                                v-for="item in certificatesTypeOptions"
                                    :label="item.name"
                                    :value="item.value"
                                />
                                
                                </el-select>
                        </el-form-item>
                        <el-form-item label="证件号码" prop="certificatesNo">
                            <el-input v-model="authForm.certificatesNo" placeholder="请输入证件号码" ></el-input>
                        </el-form-item>
                        <el-form-item label="上传证件" prop="img">
                            <el-upload
                            v-model:file-list="authForm.img"
                            :on-success="handleAvatarSuccess"
                            drag
                            :on-exceed="handleExceed"
                            :limit="1"
                            :on-remove="handleRemove"
                            :on-preview="handlePictureCardPreview"
                            list-type="picture-card"
                            action="/api/oss/file/fileUpload?fileHost=userAuah"
                            >   
                            <img src="../../../assets/images/auth_example.png" alt="">
                                
                            </el-upload>
                            <el-dialog class="previewImg" v-model="dialogVisible">
                                <img style="width: 100%;" :src="previewImageUrl" w-full alt="Preview Image" />
                            </el-dialog>
                        </el-form-item>
                        <el-form-item >
                            <el-button type="primary" @click="submitForm">提交</el-button>
                            <el-button @click="resetAuthForm">重写</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
        </el-card>
    </div>
</template>



<style lang="scss" scoped>
.vip {
    width: 1000px;
    .el-card {
        p {
            display: flex;
            justify-content: center;
        }
    }
}

::v-deep(.el-upload) {
  border: 1px dashed #999;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  padding: 0;
  margin: 0;
 background-color: rgb(250,250,250);
  .el-upload-dragger {
    // border: 0;
   
  &:hover {
    // border: 0;
  }
  img {
    width: 100%;
  }

  }
  
}

::v-deep(.previewImg) {
    width: 400px;
    border-radius: 10px;
    img {
        border-radius: 10px;
    }
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}
</style>